/**
 * @developer：MR·Feng
 * 子公司
 */

import styles from '@/styles/subsidiary/subsidiary.less';

import _ from 'lodash';
import { withRouter } from 'umi';
import React, { useEffect, useState } from 'react';
import {
    Table,
    Space,
    Form,
    Input,
    Button,
    Modal,
    Popconfirm,
    message,
} from 'antd';
import Request from '@/api/baseRequest';

const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
};

function Ssubsidiary() {
    const [form] = Form.useForm();
    const [data, setdata] = useState([]);
    const [type, settype] = useState('');
    const [update, setupdate] = useState(false);
    const [loading, setloading] = useState(false);
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [pagination, setpagination] = useState({ current: 1, pageSize: 10 });

    // table显示格式
    const columns = [
        {
            title: 'AK账户子公司',
            dataIndex: 'name',
            align: 'center',
            width: '20%',
        },
        {
            title: '备注',
            dataIndex: 'message',
            align: 'center',
            width: '40%',
        },
        {
            title: '操作',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
            width: '20%',
            render: (text, record) => (
                <Space size="middle" className={styles.operation}>
                    <span>
                        {/* <span onClick={() => handleEdit(record)}>编辑</span> */}
                        <span onClick={() => showModal(record, 'modify')}>
                            编辑
                        </span>
                        <Popconfirm
                            title="确定删除此AK账户子公司?"
                            onConfirm={() => handleDelete(record)}
                            onCancel={cancel}
                            okText="确定"
                            cancelText="取消"
                        >
                            <span>删除</span>
                        </Popconfirm>
                    </span>
                </Space>
            ),
        },
    ];

    // 页数改变
    const handleTableChange = (pagination) => setpagination(pagination);

    // 蒙层确定操作
    const handleCreate = () => {
        form.validateFields()
            .then(() => {
                let params = _.cloneDeep(form.getFieldValue());
                handleCreateEditDelete(params);
                setIsModalVisible(false);
                form.resetFields();
            })
            .catch(() => {
                message.warning('请填写必填项');
            });
    };

    // 添加\编辑\删除列表
    const handleCreateEditDelete = (params) => {
        Request.postCompany(params).then((res) => {
            if ([200, '200', 'OK'].includes(res.status)) {
                message.success(res.message || '添加成功');
                setupdate(!update);
            }
        });
    };

    // 删除列表
    const handleDelete = (val) => {
        let { name, id } = val;
        let params = {
            ...{ name, id },
            ...{ action: 'deleted' },
        };
        handleCreateEditDelete(params);
    };

    // 显示蒙层
    const showModal = (val, type) => {
        settype(type);
        if (['modify'].includes(type)) {
            form.setFieldsValue({
                name: val.name,
                id: val.id,
                action: 'modify',
            });
        } else if (['add'].includes(type)) {
            form.setFieldsValue({
                action: 'add',
            });
        }
        setIsModalVisible(true);
    };

    // 蒙层返回操作
    const handleCancel = () => setIsModalVisible(false);

    // 气泡取消操作
    const cancel = (e) => message.warn('取消删除');

    // 副作用操作
    useEffect(async () => {
        setloading(true);
        Request.getCompany().then((res) => {
            let result = res.data;
            setdata(result);
            setloading(false);
        });

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [update]);

    return (
        <section className={styles.subsidiary}>
            <Button
                type="primary"
                style={{ marginBottom: '15px' }}
                onClick={() => showModal(null, 'add')}
            >
                新增
            </Button>
            <Modal
                title={
                    type === 'add'
                        ? '添加AK账户子公司'
                        : type === 'modify'
                        ? '编辑AK账户子公司'
                        : 'AK账户子公司'
                }
                visible={isModalVisible}
                onOk={handleCreate}
                onCancel={handleCancel}
            >
                <Form {...layout} form={form} className={styles.subsidiaryForm}>
                    <Form.Item
                        label="name"
                        name="name"
                        rules={[
                            { required: true, message: 'Please input name!' },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item label="message" name="message">
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
            <Table
                columns={columns}
                rowKey={(record) => record.id}
                dataSource={data}
                pagination={pagination}
                loading={loading}
                onChange={handleTableChange}
            />
        </section>
    );
}

export default withRouter(Ssubsidiary);
